<template>
	<view class="content">

		<view class="topTu">
			<image :src="firstOrder.imgs" mode=""></image>
		</view>
		<!-- <view class="wenzi">
			<view class="note">{{firstOrder.note}}</view>
		</view> -->

		<view class="subject">
			<view class="subjectImgs">
				<image :src="firstOrder.children[0].imgs" mode=""></image>
			</view>
			<view class="huadong">
				<view style="margin-right: 10rpx;">更多</view>
				<view class="hua"><image src="@/static/activity/popularizeLaw/hua.png" mode=""></image></view>
			</view>
			<view class="scrollview-box">
				<view v-for="(item, idx) in subject" :key="item.id" class="item"
					@click="watch(item.title, item.author, item.video_url, item.description)">
					<view class="image">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="blue">单位: {{item.author}}</view>
						<view class="darkBlue" v-if="item.description">{{item.description}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="multivariant">
			<view class="multivariantImgs">
				<image :src="firstOrder.children[1].imgs" mode=""></image>
			</view>
			<view class="huadong">
				<view style="margin-right: 10rpx;">更多</view>
				<view class="hua"><image src="../../../static/activity/popularizeLaw/hua.png" mode=""></image></view>
			</view>
			<view class="scrollview-box">
				<view v-for="(item, idx) in multivariant" :key="item.id" class="item"
					@click="watch(item.title, item.author, item.video_url, item.description)">
					<view class="image">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="text">
						<view class="title">{{item.title}}</view>
						<view class="blue">单位: {{item.author}}</view>
						<view class="darkBlue" v-if="item.description">{{item.description}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				location: 'https://oss.boyaltd.cn',
				firstOrder: [],
				subject: [],
				multivariant: [],
				scrollLeftS: null,
				scrollLeftM: null,
			}
		},
		onLoad(opt) {
			let self = this;
			uni.showLoading({
				title: '加载中...'
			});
			self.get_list();
		},
		methods: {
			get_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 18,
					}
				}, function(res) {
					uni.hideLoading();
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].name == '2024普法小课堂') {
							if (data[i].imgs) {
								let img = data[i].imgs.substring(2, data[i].imgs.length - 2);
								data[i].imgs = img
							}
							let children = data[i].children
							for (var j = 0; j < children.length; j++) {
								if (children[j].imgs) {
									let img = children[j].imgs.substring(2, children[j].imgs.length - 2);
									children[j].imgs = img
								}
								// console.log('children: ', children[j].init_index);
								let init_index = children[j].init_index
								for (var z = 0; z < init_index.length; z++) {
									if (init_index[z].imgs) {
										let img = init_index[z].imgs.substring(2, init_index[z].imgs.length - 2);
										init_index[z].imgs = img
									}
								}
								if (children[j].name == '主体片') {
									self.subject = children[j].init_index
								} else if (children[j].name == '多元片') {
									self.multivariant = children[j].init_index
								}
							}
							self.firstOrder = data[i]
						}
					}
					console.log('firstOrder: ', self.firstOrder);
					console.log('subject: ', self.subject);
					console.log('multivariant: ', self.multivariant);
				}, false)
			},
			scrollS(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			scrollM(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			watch(title, author, videoUrl, description) {
				if (description) {
					uni.navigateTo({
						url: 'video_details?title=' + title + '&author=' + author + '&videoUrl=' + videoUrl +
							'&description=' + description
					})
				} else {
					uni.navigateTo({
						url: 'video_details?title=' + title + '&author=' + author + '&videoUrl=' + videoUrl
					})
				}

			}
		},
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: #093DDA;
		padding-bottom: 60rpx;
	}

	.topTu {
		width: 100vw;
		height: 350rpx;
	}

	.topTu>image {
		width: 100%;
		height: 100%;
	}

	.wenzi {
		width: 90%;
		margin: 0 auto;
	}

	.note {
		width: 92%;
		position: absolute;
		top: 290rpx;
		color: white;
		font-size: 15rpx;
		letter-spacing: 2rpx;
		text-indent: 3em;
		line-height: 20rpx;
	}
	
	.subject {
		margin-top: 50rpx;
	}

	.subjectImgs,
	.multivariantImgs {
		width: 90%;
		height: 82rpx;
		margin-left: 5%;
		margin-top: 15rpx;
	}
	
	.subjectImgs>image,
	.multivariantImgs>image {
		width: 100%;
		height: 100%;
	}
	
	.huadong {
		color: white;
		display: flex;
		align-items: center;
		position: absolute;
		right: 50rpx;
		margin-top: -60rpx;
	}
	
	.hua {
		width: 30rpx;
		height: 30rpx;
	}
	
	.hua>image {
		width: 100%;
		height: 100%;
	}

	.scrollview-box {
		/* width: 90%;
		margin: 0 auto; */
		margin: 0 20rpx;
		margin-top: 30rpx;
		display: flex;
		/* 使用 flexbox 实现横向布局 */
		overflow-x: auto;
		overflow-y: hidden;
		/* 启用横向滚动 */
		white-space: normal;
		/* 允许文字换行 */
	}

	.item {
		width: 335rpx;
		margin: 0 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.image {
		width: 335rpx;
		height: 220rpx;
	}

	.image>image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.text {
		margin: 12rpx;
	}

	.title {
		color: #103673;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.blue {
		color: #52B2EF;
		font-size: 25rpx;
		width: 100%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.darkBlue {
		text-indent: 2em;
		color: #103673;
		font-size: 20rpx;
		margin-top: 10rpx;
		padding-top: 10rpx;
		border-top: 1px solid gray;
		width: 310rpx;
		/* 设置容器宽度 */
		/* height: 169rpx; */
		/* 设置容器高度 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		display: -webkit-box;
		/* 使用 Flexbox 布局 */
		-webkit-box-orient: vertical;
		/* 垂直方向排列 */
		-webkit-line-clamp: 2;
		/* 限制显示的行数 */
	}
</style>